﻿<template>
	<div class="process-config-container">
	  <el-dialog 
		v-model="state.showDialog" 
		width="75%"
		top="2vh"
		draggable
		:close-on-click-modal="false"
		class="process-config-dialog"
		style="height: 90vh; max-height: 400px;">
		
		<template #header>
			<div style="color: #fff">
				<span>{{ state.title }}</span>
			</div>
		</template>

		<el-card shadow="never" class="routing-info-card">
			<span style="color: #aaa">工艺路线信息</span>
			
		  <el-descriptions :column="3" border>
			<el-descriptions-item label="工艺路线编码">{{ state.routingInfo.routingCode }}</el-descriptions-item>
			<el-descriptions-item label="工艺路线名称">{{ state.routingInfo.routingName }}</el-descriptions-item>
			<el-descriptions-item label="备注">{{ state.routingInfo.remark || '-' }}</el-descriptions-item>
		  </el-descriptions>
		</el-card>
		
		
		<el-card shadow="never" class="detail-management-card">
		  <div class="detail-header">
			<span style="color: #aaa">工序配置</span>

			<div class="header-actions">
			  <el-button-group>
				<!-- <el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'baseRoutingDetail:page'">刷新</el-button> -->
				<el-button type="primary" icon="ele-Plus" @click="openDetailEditDialog(null)" v-auth="'baseRoutingDetail:add'">新增工序</el-button>
				<!-- <el-button type="danger" icon="ele-Delete" @click="batchDeleteDetails" :disabled="state.selectDetails.length === 0" v-auth="'baseRoutingDetail:batchDelete'">批量删除</el-button> -->
			  </el-button-group>
			</div>
		  </div>
  
		  <el-table
			:data="state.detailData"
			style="width: 100%;flex: 1;"
			v-loading="state.detailLoading"
			@selection-change="handleDetailSelectionChange"
			border>
			
			<el-table-column type="selection" width="45" align="center" v-if="auth('baseRoutingDetail:batchDelete')" />
			<el-table-column type="index" label="序号" width="60" align="center" />
			<el-table-column prop="sortNum" label="工序顺序" width="120" sortable>
			  <template #default="{row}">
				<el-tag>{{ row.sortNum }}</el-tag>
			  </template>
			</el-table-column>
			<el-table-column prop="processCode" label="工序编码" />
			<el-table-column prop="processName" label="工序名称" />
			<el-table-column label="操作" width="180" fixed="right" align="center">
			  <template #default="{row}">
				<el-button size="small" text type="primary" @click="openDetailEditDialog(row)" v-auth="'baseRoutingDetail:update'">编辑</el-button>
				<el-button size="small" text type="danger" @click="deleteDetail(row)" v-auth="'baseRoutingDetail:delete'">删除</el-button>
			  </template>
			</el-table-column>
		  </el-table>
  
		  <el-pagination
			v-model:current-page="state.detailParams.page"
			v-model:page-size="state.detailParams.pageSize"
			:total="state.detailParams.total"
			:page-sizes="[10, 20, 50, 100]"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="handleQuery"
			@current-change="handleQuery"
			style="margin-top: 15px" />
		</el-card>
		
	  </el-dialog>
  

	  <edit-dialog ref="editDetailDialogRef" @reloadTable="handleQuery" />
	</div>
</template>
  
<script lang="ts" setup name="ProcessConfigDialog">
  import { ref, reactive } from "vue";
  import { ElMessage, ElMessageBox } from "element-plus";
  import { auth } from '/@/utils/authFunction';
  import { useBaseRoutingDetailApi } from '/@/api/baseprocess/baseRoutingDetail';
  import editDialog from '/@/views/baseprocess/baseRoutingDetail/component/editDialog.vue';
  
  const emit = defineEmits(["reloadTable"]);
  
  const baseRoutingDetailApi = useBaseRoutingDetailApi();
  const editDetailDialogRef = ref();
  
  const state = reactive({
	showDialog: false,
	title: '工艺路线配置',
	routingInfo: {} as any,
	
	// 详情表格相关状态
	detailLoading: false,
	selectDetails: [] as any[],
	detailData: [] as any[],
	detailParams: {
	  page: 1,
	  pageSize: 10,
	  total: 0,
	  routingId: ''
	}
  });
  
  // 打开弹窗
  const openDialog = async (row: any, title?: string) => {
	state.routingInfo = row;
	state.detailParams.routingId = row.id;
	state.title = title || `配置工艺路线 - ${row.routingName}`;
	state.showDialog = true;
	await handleQuery();
  };
  
  // 查询工序详情
  const handleQuery = async () => {
	state.detailLoading = true;
	try {
	  const res = await baseRoutingDetailApi.page({
		...state.detailParams,
		routingId: state.routingInfo.id
	  });
	  state.detailData = res.data.result?.items || [];
	  state.detailParams.total = res.data.result?.total || 0;
	} finally {
	  state.detailLoading = false;
	}
  };
  
  // 打开工序编辑对话框
  const openDetailEditDialog = (row: any) => {
	const defaultData = { 
	  routingId: state.routingInfo.id,
	  routingCode: state.routingInfo.routingCode,
	  routingName: state.routingInfo.routingName
	};
	editDetailDialogRef.value.openDialog(
	  row ? {...row} : defaultData,
	  row ? '编辑工序' : '添加工序'
	);
	// 手动刷新（临时方案）
	setTimeout(() => {
    handleQuery();
  }, 1000); // 1秒后刷新（确保子对话框已关闭）
  };
  
  // 删除单条工序
  const deleteDetail = (row: any) => {
	ElMessageBox.confirm(`确定要删除工序 "${row.processName}" 吗?`, '提示', {
	  confirmButtonText: '确定',
	  cancelButtonText: '取消',
	  type: 'warning'
	}).then(async () => {
	  await baseRoutingDetailApi.delete({ id: row.id });
	  ElMessage.success('删除成功');
	  handleQuery();
	}).catch(() => {});
  };
  
  // 批量删除工序
  const batchDeleteDetails = () => {
	ElMessageBox.confirm(`确定要删除选中的 ${state.selectDetails.length} 条工序吗?`, '提示', {
	  confirmButtonText: '确定',
	  cancelButtonText: '取消',
	  type: 'warning'
	}).then(async () => {
	  await baseRoutingDetailApi.batchDelete(state.selectDetails.map(item => ({ id: item.id })));
	  ElMessage.success(`成功删除 ${state.selectDetails.length} 条工序`);
	  handleQuery();
	}).catch(() => {});
  };
  
  // 工序选择变化
  const handleDetailSelectionChange = (val: any[]) => {
	state.selectDetails = val;
  };
  
  defineExpose({ openDialog });
</script>
  
<style lang="scss" scoped>
.process-config-dialog {
  
  :deep(.el-dialog) {
    display: flex;
    flex-direction: column;

    .el-dialog__body {
      flex: 1;
      padding: 15px 20px;
      overflow: hidden;
    }
  }

  .dialog-content {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .routing-info-card {
    flex-shrink: 0;
  }

  .detail-management-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .el-table {
      flex: 1;
      overflow: auto;
    }
  }
}
</style>